<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Lss extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>家乡：{this.props.sex}</li>
                    </ul>
                )
            }
        }
        // 定义props传参规则，指定类型
        Lss.propTypes = {
            // 这种写法对顺序也有要求
            name: PropTypes.string.isRequired, // 指定名字必须传递且是字符串类型，不传递就报错
            sex: PropTypes.string, // 指定性别是字符串类型，且有默认值，默认值在下面
            age: PropTypes.number.isRequired, // 指定年龄是数字类型
            swim: PropTypes.func // 指定传递的类型必须是函数
        }

        // 指定默认值
        Lss.defaultProps = {
            sex: "男男男",
            age: 888
        }

        let info = { name: "孙悟空", age: 500, sex: '男' }
        // 通过...语法把数据传递子组件，然后通过react工具就能看到了，组件中通过this就能访问到了
        ReactDOM.render(<Lss  {...info} />, document.querySelector('#test'))

        ReactDOM.render(<Lss name="猪八戒" />, document.querySelector('#test1'))

        function swim() {
            console.log('I can swim');
        }

        // 通过react工具，也可以看到这个虚拟函数
        // console.log('打印看虚拟DOM，看函数', <Lss name="沙和尚" age={1000} swim={swim} />);
        ReactDOM.render(<Lss name="沙和尚" age={1000} swim={swim} />, document.querySelector('#test2'))



    </script>
</body>

</html>